<?php
/**
 * Created by PhpStorm.
 * User: dreamy
 * Date: 2019-06-22
 * Time: 09:31
 */
use yii\helpers\Html;
?>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>个人中心-<?= \common\services\DomainExtraConfigService::getVal('name');?></title>
    <meta name="keywords" content="<?= $this->params['seoData']['keywords'] ?>">
    <meta name="description" content="<?= $this->params['seoData']['description'] ?>">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/global.css">
</head>

<body id="app">
<?=Html::cssFile('@web/static/css/index.css')?>
<?php echo $this->render('../public/ele.php')?>
<!--引入页面头部-->
<?php echo $this->render('../public/header.php')?>
<?=Html::jsFile('@web/static/js/jquery-3.4.1.min.js')?>

<style>
    #app{
        background: #f9f9f9ee;
    }
    .profile{
        color: #606266;
        padding-top: 10px;
    }
    #personalMain{
        margin: 80px auto 10px auto;
        width: 1000px;
    }
    #personalMain .personal-aside{
        color: #333;
        background-color:#FFF;
    }
    .personal-main{
        width: 100%;
        margin-left: 15px;
        background-color: #FFF;
        padding: 10px 10px 10px 20px;
        min-height: 500px;
    }
    .profile-avatar{
        width: 300px;
        margin: 0 auto;
        padding-top: 20px;
    }
    .profile-avatar-img{
        margin-bottom: 5px;
    }
    .profile-input{
        width: 400px;
    }
</style>
<div id="personalMain">
    <el-container>
        <el-aside class="personal-aside" width="200px">
            <el-menu :default-openeds="['1']" :default-active="activeMenuIndex" @select="handleMenuSelect">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-message"></i>个人中心</template>
                        <el-menu-item index="1-1">基本资料</el-menu-item>
                        <el-menu-item index="1-2">修改密码</el-menu-item>
                        <el-menu-item index="1-3" v-if="profileForm['vip_status'] == 0">修改手机号</el-menu-item>
<!--                        <el-menu-item index="1-3">操作日志</el-menu-item>-->
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-row class="personal-main">
            <!--基本资料内容块-->
            <div class="profile" v-if="activeMenuIndex=='1-1'">
                <div class="profile-avatar">
                    <el-avatar :size="80" class="profile-avatar-img">
                        <img :src="profileForm.avatar" />
                    </el-avatar>
                    <el-upload
                            class="upload-avatar"
                            action="/api/upload/file"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                            :headers="upHeaders"
                            accept="image/jpeg,image/gif,image/png">
                        <el-button size="small" type="primary">更换头像</el-button>&nbsp;&nbsp;<span slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过3mb</span>
                    </el-upload>
                </div>
                <el-divider></el-divider>
                <el-form status-icon label-width="100px" class="profile-form">
                    <el-form-item label="手机号" prop="mobile">
                        <el-input type="text" disabled autocomplete="off" class="profile-input" v-model="profileForm.mobile"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="username">
                        <el-input type="text" autocomplete="off" v-model="profileForm.username" class="profile-input" clearable></el-input>

                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input type="text" autocomplete="off" v-model="profileForm.email" class="profile-input" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitProfileForm()">修改资料</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <!-- 修改密码内容块-->
            <div class="profile" v-if="activeMenuIndex=='1-2'" >
                <div style="height:30px;"></div>
                <el-form :model="passForm" ref="passForm" status-icon label-width="100px" class="profile-form"s>
                    <el-form-item label="旧密码" prop="old" required>
                        <el-input type="password" autocomplete="off" class="profile-input" v-model="passForm.old" clearable show-password></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="new" required>
                        <el-input type="password" autocomplete="off" v-model="passForm.new" class="profile-input" clearable show-password></el-input>
                    </el-form-item>
                    <el-form-item label="重复新密码" prop="new2" required>
                        <el-input type="password" autocomplete="off" v-model="passForm.new2" class="profile-input" clearable show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitPassForm('passForm')">修改密码</el-button>
                    </el-form-item>
                </el-form>
            </div>


            <div class="profile" v-if="activeMenuIndex=='1-3'" >
                <div style="height:30px;"></div>
                <el-form :model="mobileForm" ref="mobileForm" status-icon label-width="100px" class="profile-form"s>
                    <el-form-item label="验证码" prop="new" required>
                        <el-input type="sms_code" autocomplete="off" v-model="mobileForm.sms_code" class="profile-input" clearable show-password></el-input>
                        <el-button type="primary" @click="send_sms()" :disabled="sendBtnDisabled">发送验证码</el-button>
                    </el-form-item>
                    <el-form-item label="新手机号" prop="new2" required>
                        <el-input type="mobile" autocomplete="off" v-model="mobileForm.mobile" class="profile-input" clearable show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitPhoneForm()">修改手机号</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div style="clear: both;"></div>
        </el-row>
    </el-container>
</div>

<div style="height: 100px;"></div>
<?php echo $this->render('../public/footer.php')?>

<script type="application/javascript">
    let loginToken  =  localStorage.getItem('loginToken');
    new Vue({
        el:'#personalMain',
        data() {
            return {
                upHeaders:{
                    token:loginToken
                },
                profileForm:{},
                mobileForm:{},
                passForm:{},
                activeMenuIndex:'1-1',
                sendBtnDisabled:false
            }
        },

        mounted:function() {
            if(!logined){
                location.href='/login'
            }
            this._initPersonal()
        },
        methods:{
            _initPersonal(){
                let that = this
                axios.get('/api/user/get-info',{
                    method: 'get',
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.profileForm = res.data.data
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                })
            },
            handleMenuSelect(index, indexPath ){
                this.activeMenuIndex = index
                console.log(this.activeMenuIndex)
            },
            submitProfileForm(){
                let that = this
                let postUrl = '/api/user/edit'
                axios.post(postUrl,that.profileForm,{
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.showTips('success','操作成功~')
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                    that.tallyDialog = false;
                })
            },

            submitPhoneForm(){
                let that = this
                let postUrl = '/api/user/user-phone'
                axios.post(postUrl,that.mobileForm,{
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.showTips('success','操作成功~')
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                    that.tallyDialog = false;
                })
            },

            submitPassForm(formName){
                let that = this
                if(this.passForm.old == '' || this.passForm.new == '' || this.passForm.new2 == '' ){
                    that.showTips('error','请填写必填项目~')
                    return false
                }
                if(this.passForm.new.length < 5){
                    that.showTips('error','新密码最少6位~')
                    return false
                }
                if(this.passForm.new != this.passForm.new2 ){
                    that.showTips('error','两次密码不一致~')
                    return false
                }
                axios.post('/api/user/set-password',{
                    'password' : that.passForm.new
                },{
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.showTips('success','操作成功~')
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                    that.passForm = {};
                })
            },
            send_sms(){
                let that = this;
                let phone =this.profileForm['mobile'];
                axios.post('/api/public/sms',{
                    'phone' : phone
                },{
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.sendBtnDisabled = true;
                        that.showTips('success','操作成功~')

                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                    that.passForm = {};
                })
            },
            handleAvatarSuccess(res, file) {
                this.profileForm.avatar = res.data.url
                this.submitProfileForm()
            },
            beforeAvatarUpload(file) {
                // console.log(file);
            },
            showTips(type,msg){
                this.$message({
                    type: type,
                    message: msg
                });
            }
        },
    })
</script>
</body>
</html>
